<template>
	<view class="">
		<u-sticky bgColor="#fff">
			<view class="flexbetween dingwei">
				<view class="flexcenter " :class="tab_type==item.value?'baisebj':'huangsebj'" v-for="item in toplist"
					:key="item.value" @click="tab_type=item.value;getlist();"
					style="width: 50%;padding: 15rpx;box-sizing: border-box;">{{item.name}}</view>
			</view>
		</u-sticky>
		<view class="mainpadding2">
			<view class="flexcenter" v-if="!list.length">
				<view class="placeholderimage" style="margin-top: 100rpx;"></view>
			</view>
			<view class="mainpadding_top shadow ffffff radius dingwei" v-for="item in list" :key="item.id" @click="enterdetail(item)">
				<!-- <view class="checkfocus xiaobai" v-show="item.is_tx==1">已填寫</view> -->
				<!-- <view class="checkfocus xiaobai" style="background-color: #999;" v-show="item.is_tx==0">未填寫</view> -->
				<text v-show="item.is_staff==1" class="checkfocus xiaobai" style="font-size: 26rpx;background-color: #31a3d6;">員工</text>
				<view class="flexleft">
					<view class="flexleft">
						<image src="/static/logo.png" mode="" class="radius" style="min-width: 100rpx;width: 100rpx;height: 100rpx;" v-if="item.is_staff==1"></image>
						<image :src="item.logoimage_text" class="radius" mode="" style="min-width: 100rpx;width: 100rpx;height: 100rpx;" v-if="item.is_staff==0"></image>
						<view class="margin_left2">
							<view class="xiaohei titletext ">{{item.name}}
							</view>
						</view>
					</view>
				</view>
				<view class="flexbetween margin_top1" v-if="item.orderinfo && item.orderinfo.pay_image">
					<view class="xiaohei main_size">支付憑證</view>
					<image class="listleftimg1 radius" :src="item.orderinfo.pay_image_text" mode=""></image>
				</view>
				<view class="xiaohui margin_top1 bold textright" v-if="item.orderinfo && item.is_tx==1">
					合計：
					<text class="xiaohuang">${{item.orderinfo.pay_price}}</text>
					<!-- 状态:1=待支付,2=待领取,3=已领取,4=已作废 -->
					<template v-if="item.orderinfo.status==1">
						<text>，已付：$0，</text>
						<text class="xiaohong">未付：${{item.orderinfo.pay_price}}</text>
					</template>
					<template  v-if="item.orderinfo.status==2 || item.orderinfo.status==3">
						<text>，已付：${{item.orderinfo.pay_price}}，</text>
						<text class="xiaohong">未付：$0</text>
					</template>
				</view>
				<view class="flexright margin_top1" v-if="item.orderinfo && item.orderinfo.status!=1 && item.orderinfo.status!=4">
					<view class="huang_text main_size bold " v-show="item.orderinfo.payinfo.paytype==1">
						點數支付
					</view>
					<view class="huang_text main_size bold " v-show="item.orderinfo.payinfo.paytype==2">多元支付
					</view>
					<view class="huang_text main_size bold " v-show="item.orderinfo.payinfo.paytype==3">現金支付
					</view>
					<view class="huang_text main_size bold " v-show="item.orderinfo.payinfo.paytype==4">信用卡
					</view>
					<view class="huang_text main_size bold " v-show="item.orderinfo.payinfo.paytype==5">Line Pay線上支付
					</view>
					<view class="huang_text main_size bold " v-show="item.orderinfo.payinfo.paytype==6">街口線上支付
					</view>
					<view class="huang_text main_size bold " v-show="item.orderinfo.payinfo.paytype==7">街口線下支付
					</view>
					<view class="huang_text main_size bold " v-show="item.orderinfo.payinfo.paytype==8">Line Pay線下支付
					</view>
					<view class="huang_text main_size bold " v-show="item.orderinfo.payinfo.paytype==9">Line Pay二維碼支付
					</view>
					<view class="huang_text main_size bold " v-show="item.orderinfo.payinfo.paytype==10">街口二維碼支付
					</view>
					<view class="huang_text main_size bold " v-show="item.orderinfo.payinfo.paytype==11">全支付線下支付
					</view>
				</view>
				<view class="flexright" v-if="item.orderinfo && item.orderinfo.status==1">
					<view class="listbtnhuang margin_top1" @click="endOrder(item)">確認收款</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab_type:1,
				toplist:[{
					name: '全部',
					value: 1,
				}, {
					name: '已填寫',
					value: 2,
				},{
					name: '未填寫',
					value: 3,
				}],
				listid:"",
				ListAll:{},
				list:[]
			}
		},
		onLoad(options) {
			this.tab_type = options.tab_type
			this.listid = options.id
		},
		onShow() {
			this.init()
		},
		methods: {
			enterdetail(item){
				if(item.orderinfo){
					this.jumpdetail('/pages/workbench/huodonghx?id=',item.orderinfo.id)
				}
			},
			endOrder(item) { //確認收款
				if (item.orderinfo.pay_image) {
					this.http.modal('提示', "是否確認收款", true, (resp) => {
						if (resp) {
							this.http.request('/api/Shopwelfarecl/sureGetPrice', 'POST', {
								id: item.orderinfo.id,
								paytype:2,
								scanpay_code:""
							}).then(res => {
								if (res.code == 1) {
									this.http.toast("操作成功")
									this.init()
								} else {
									this.http.toast(res.msg)
								}
							})
						}
					})
				} else {
					uni.navigateTo({
						url: "/pages/workbench/diaochaqrsk?id=" + item.orderinfo.id + "&total_price=" + item.orderinfo.pay_price
					})
				}
			},
			init(){
				this.http.request("/api/Shopwelfarecl/txIndex", 'POST', {
					id:this.listid
				}).then(res => {
					this.ListAll = res.data
					this.getlist()
				})
			},
			getlist(){
				if(this.tab_type==1) this.list = this.ListAll.all_data
				if(this.tab_type==2) this.list = this.ListAll.yt_data
				if(this.tab_type==3) this.list = this.ListAll.wt_data
			}
		}
	}
</script>

<style lang="scss" scoped>
.listleftimg1 {
		width: 150rpx;
		min-width: 150rpx;
		height: 150rpx;
		position: relative;
	
		image {
			width: 100%;
			height: 100%;
		}
	}
</style>
